<!--suppress ALL -->
<include file="./Template/header.html" />

<link rel="stylesheet" type="text/css" href="/Template/css/myActivity.css">
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

	$(function() {

		//初始化页面配置
		document.title = "活动列表";

		var app = new Vue({
			el: '#container',
			data: {
				activityList: [],
			},
			methods: {
				activityDetail: function(id, type, url) {
					if(type == 2) {
                        window.location.href = url;
					} else {
                        window.location.href = "/wechat/activity/detail/id/"+id;
					}
				},
				jump: function(url) {
					window.location.href = url;
				}
			}
		})

		function getActivityList(categoryId) {

			$.ajax({
				url:"/wechat/activity/activityList",
				type:"post",
				data:{
					categoryId: categoryId
				},
				dataType:"JSON",
				beforeSend:function(){
					$("#loadingToast").show();
				},
				complete:function(){
					$('#loadingToast').hide();
				},
				success:function(data){
					app.activityList = data;
				},
			})
		}

		$("select[name=categoryId]").change(function() {

			var categoryId = $(this).val();

			getActivityList(categoryId);

		});

		$(".search-box").change(function() {
			var value = $(this).find("option:selected").text();
			$(this).prev().attr('placeholder',value);
		});

		getActivityList("{$categoryId}");

		var value = $("select[name=categoryId]").find("option:selected").text();
		$("select[name=categoryId]").prev().attr('placeholder',value);


	});


</script>

<div class="container" id="container">
	<div class="head-search">
		<span class="disease">病症：</span>
		<img class="icon-arrow" src="/Template/images/icon-arrow.png" alt="">
		<input class="search-line" type="text" placeholder="请选择所对应的症状" readonly>
		<select class="search-box" name="categoryId">
			<option value="0" class="choose">请选择所对应的症状</option>
			{:getCategorySelectOptionHtml($categoryId, 0)}
		</select>
	</div>

	<div class="no-data" v-if="activityList == null">暂无数据</div>
	<div class="content">
		<div class="activity-info" v-for="activity in activityList" v-on:click="activityDetail(activity.activity_id, activity.activity_type, activity.activity_link)">
			<div class="activity-status">
				<div class="applying active" v-if="activity.status == -1">报名中</div>
				<div class="end active" v-if="activity.status == 1">已报满</div>
				<div class="full active" v-if="activity.status == 2">已截止</div>
				<div class="news active" v-if="activity.status == 3">新 闻</div>
			</div>
			<div class="bg-img">
				<img src="{{activity.title_image}}" alt="">
			</div>
			<p class="activity-title">{{activity.title}}</p>
			<p class="activity-detail" v-if="activity.activity_type != 3">
				<img class="pic" src="/Template/images/icon-time.png" alt="">
				时间：
				<span class="activity-date">{{activity.day}}</span>
				<span class="activity-time">{{activity.time}}</span>
			</p>
			<p class="activity-detail" v-if="activity.activity_type != 3">
				<img class="pic" src="/Template/images/icon-address.png" alt="">
				地点：<span class="address">{{activity.location}}</span>
			</p>
			<p class="activity-detail" v-if="activity.activity_type == 1">
				<img class="pic" src="/Template/images/icon-user.png" alt="">
				人数：
				<span class="wanted-number">{{activity.upper_limit}}</span>
				人（已报名 <span class="actual-number">{{activity.join_number}}</span>人）
			</p>
			<p class="activity-detail" v-if="activity.activity_type == 1">
				<img class="pic" src="/Template/images/icon-bag.png" alt="">
				费用：
				<span class="fee-per-user">{{activity.price}}元/人</span>
			</p>
		</div>
	</div>
</div>
<include file="./Template/footer.html" />

